<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>dota</title>
  <link rel="stylesheet" href="animate.min.css">
  <link rel="stylesheet" href="base.css">
  <style>
    * {
      word-break: break-all;
    }

    body, div, p {
      margin: 0 auto;
      padding: 0px;
      font-size: 12px;
      width: 100%;
    }

    ul {
      list-style: none;
    }

    img, a img {
      border: none;
    }

    a {
      text-decoration: none;
    }

    a {
      color: #000;
    }

    a:hover {
      text-decoration: none;
    }

    body {
      background-color: rgba(33, 33, 33, 1.00);
      overflow: hidden;
      top: -20px;
    }

    .dota2_card {
      float: left;
      width: 20rem;
      height: 21rem;
      margin-left: 2.6rem;
      padding-top: 1rem;
      color: #6C6E85;
      transition: all 1s ease 0s;
    }

    .dota2_card:hover {
      color: #000;
      box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, .5);
    }

    .dota2_card img {
      width: 9rem;
      height: 9rem;
      display: block;
      margin: 0 auto;
      border: 4px solid #343851;
      border-radius: 0rem;
    }

    .dota2_card dd {
      font-size: 1.25rem;
      width: 12.5rem;
      line-height: 3rem;
      text-align: center;
      border-bottom: 1px solid #6C6E85;
    }

    .dota2_card p {
      font-size: 1.5625rem;
      text-align: center;
      width: 13rem;
      line-height: 2.2rem;
      margin-top: 0.625rem;
    }

    .dota2_card:hover {
      color: #fff;
    }

    .dota2_card a {
      display: block;
      background: url(jiantou.png);
      width: 1.9375rem;
      height: 1.9375rem;
      border: 0px;
      margin: 0.5rem auto;
    }

    .dota2_card a:hover {
      background: url(jiantou2.png);
    }

    .dota2_div {
      width: 100%;
      float: left;
    }

    #dota2_message {
      margin-top: 12rem;
      height: 12.5rem;
    }

    #dota2_title, #dota2_end, #dota2_ps {
      width: 26.25rem;
      height: 5rem;
      background: rgba(187, 236, 234, 0.2);
      /* margin-top: 2rem; */
      padding: 0.9375rem;
      color: #fff;
      font-size: 1.5625rem;
      line-height: 2.8125rem;
      border-radius: 5px;
    }

    #dota2_end, #dota2_ps {
      margin-top: 8.4375rem;
      font-size: 1.625rem;
      width: 51.25rem;
      height: 5.625rem;
    }

    #dota2_end {
      font-size: 1.875rem;
      background-color: rgba(33, 33, 33, 1.00);
    }

    #dota2 {
      position: relative;
      left: -2100px
    }

    .dota2_rate3,
    .dota2_rate4,
    .dota2_rate5 {
      border: 1px solid #05ff8f;
    }

    .dota2_rate2 {
      border: 3px solid #bca6d5;
    }

    .dota2_rate1 {
      border: 5px solid #dcdc00;
    }

    #alert_msg {
      height: 3.75rem;
      text-align: center;
      position: fixed;
      top: 30%;
      margin-top: -16rem;
      line-height: 3rem;
      width: 100%;
    }

    #alert_msg span {
      color: #fff;
      background: rgba(0, 0, 0, 0.6);
      height: 3rem;
      display: inline-block;
      padding: 0 3rem;
      border-radius: 5px;
    }

    /*图片墙*/
    .wrapper-images {
      display: flex;
      flex-direction: column;
      height: 150vh;
      width: 175vw;
      justify-content: center;
      left: 60%;
      position: absolute;
      top: 55%;
      opacity: 0.8;
      transform: translate3d(-50%, -50%, 0) perspective(800px) rotatey(10deg) rotateX(-10deg);
      overflow: hidden;
    }

    .images-line {
      -webkit-animation: runner 15s linear infinite;
      animation: runner 15s linear infinite;
      display: flex;
      transform: translateX(23%);
    }

    .images-line:nth-child(even) {
      -webkit-animation-duration: calc(15s * 1.5);
      animation-duration: calc(15s * 1.5);
    }

    .images-line .line {
      background-position: 50% 50%;
      background-size: cover;
      flex: none;
      height: 14vh;
      margin: clamp(5px, 5px, 5px);
      width: 30vh;
      position: relative;
      transition: ease-in-out all 0.3s;
      border-radius: 1rem;
    }

    .images-line .line .img {
      position: absolute;
      z-index: 2;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-position: 50% 50%;
      background-size: cover;
      transition: ease-in-out all 0.3s;
      overflow: hidden;
      border-radius: 1rem;
    }

    /*.img_bdzm3{*/
    /*    color: #fff;*/
    /*    font-size: 1.25rem;*/
    /*    line-height: 1;*/
    /*    border-style: none;*/
    /*    outline: none;*/
    /*    height: calc(1em + 1.6em + 0.5em);*/
    /*    width: 100%;*/
    /*    padding: 0.8em 1em;*/
    /*    border: 0.35em solid transparent;*/
    /*    background-image: linear-gradient(#000, #000), linear-gradient(120deg, #f09 0%, #0ff 50%, #9f0 100%);*/
    /*    background-origin: border-box;*/
    /*    background-clip: padding-box, border-box;*/
    /*    border-radius: 1.8em;*/
    /*    background-size: 200% 100%;*/
    /*    transition: background-position 0.8s ease-out;*/
    /*}*/
    .images-line .line:hover .img {
      cursor: pointer;
      transform: scale(1.1) translatez(0px);
      border: 3px solid var(--theme-color);;
    }

    .images-line .img_bdzm3:hover .img {
      border: 5px solid gold;
    }

    .images-line .line:hover:after {
      filter: blur(35px) opacity(0.8);
    }

    .images-line .line:after {
      content: "";
      background: inherit;
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      top: 3vh;
      position: absolute;
      background-size: cover;
      z-index: -1;
      transition: ease-in-out all 0.3s;
      filter: blur(25px) opacity(0.8);
    }

    @-webkit-keyframes runner {
      to {
        transform: translateX(-10.4%);
      }
    }

    @keyframes runner {
      to {
        transform: translateX(-10.4%);
      }
    }
    .tt{
      border: 3px solid #29cc2d;
    }
    .yy{
      border: 3px solid #cc3729;
    }
  </style>
</head>
<body>
<div id="video_cover"></div>
<button id="play">开始</button>
<button id="pause">暂停</button>
<button id="check">跟踪动画</button>
<button id="img_hidden">小可爱</button>
<button id="music">音乐</button>
<div class="wrapper-images" style="display: none"></div>
<div id="dota2">
  <div id="dota2_title" class="dota2_div"></div>
  <div id="dota2_message" class="dota2_div"></div>
  <div id="dota2_ps" style="display: none;"></div>
  <div id="dota2_end" style="display: none;"></div>
</div>
<table id="dota2_table"></table>
<audio controls autoplay loop id="myMusic" hidden>
  <source src="pa.mp3" type="audio/mpeg">
</audio>
<div id="console_message"></div>
</body>

<script src="jquery-3.3.1.js"></script>
<script src="anime.min.js"></script>
<script>
  var arr;
  var obj;
  var moveX = 2100;
  var base_delay = 1000;
  var base_delay_endTime = 10000;
  var hero_num = 5;
  var split_dota2 = "npc_dota_hero_";
  var time_each_card = 25000;
  var time_each_card_delay = 1;
  var delay_endTime = 4000;
  var delay_gold_endTime = 17000;
  var ps_leaveTime = 2000;
  var ps_main_leaveTime = 4000;
  var timeout = function (n) {
    return new Promise(function (resolve) {
      setTimeout(resolve, n);
    });
  };
  var result_heroes = [];
  var result_heroes_str = [];
  var animation = [];
  $(function () {
    $("#music").click(function () {
      let audios = document.getElementById('myMusic');
      if (audios.paused) {
        audios.play();
      } else {
        audios.pause();
      }
    })
    $("body").click(function () {
      let audios = document.getElementById('myMusic');
      if (audios.paused) {
        audios.play();
      } else {
        audios.pause();
      }
    })
    $("#play").click(function () {
      $.each(animation,function (index,element) {
        element.play();
      })
    });
    $("#pause").click(function () {
      $.each(animation,function (index,element) {
        element.pause();
      })
    });
    $("#check").click(function () {
      $("#console_message").html("");
      $.each(animation,function (index,element) {
        let id = element.animatables[0].target.id
        let dom = document.getElementById(id);
        if ($(dom).length) {
          $("#console_message").append($("#console_message").html()+`"${anime.get(dom, 'width', 'px')}"`);//todo
        }
      })
    });

    $.ajaxSettings.async = false;
    $.getJSON('heroes.json', function (data) {
      let heroes = JSON.parse(JSON.stringify(data));
      let heroes_cn;
      $.getJSON('heroes_simple_cn.json', function (data_cn) {
        heroes_cn_result = JSON.parse(JSON.stringify(data_cn));
        heroes_cn = heroes_cn_result.result.heroes;
      })
      for (let key in heroes) {
        let hero = data[key]
        if (hero.primary_attr === "agi") {
          hero.base_attack = (hero.base_attack_min + hero.base_attack_max) / 2 + hero.base_agi;
        }
        if (hero.primary_attr === "str") {
          hero.base_attack = (hero.base_attack_min + hero.base_attack_max) / 2 + hero.base_str;
        }
        if (hero.primary_attr === "int") {
          hero.base_attack = (hero.base_attack_min + hero.base_attack_max) / 2 + hero.base_int;
        }
        if (hero.primary_attr === "all") {
          hero.base_attack = (hero.base_attack_min + hero.base_attack_max) / 2 + ((hero.base_agi + hero.base_str + hero.base_int) * 6) / 10;
        }
        hero.base_armor = parseFloat((hero.base_armor + hero.base_agi / 6).toFixed(1));
        hero.base_count_asi_gain = parseFloat(hero.str_gain + hero.agi_gain + hero.int_gain).toFixed(1);
        $.each(heroes_cn, function (index, hero_cn) {
          if (hero_cn.id == parseInt(key)) {
            hero.localized_name_cn = hero_cn.localized_name;
            result_heroes.push(hero);
            return;
          }
        });
      }
    })
    console.log(result_heroes);

    let tableHero = "";
    let wrapperHero="";
    let $dota2_wrapper=$(".wrapper-images");
    $.each(result_heroes, function (index, hero) {
      wrapperHero +=`<div class="line dota2_b_png"
             style="background-image:url(https://hoppinzq.com/dota2/png/${hero.name}.png)">
            <div class="img"
                 style="background-image:url(https://hoppinzq.com/dota2/png/${hero.name}.png)"></div>
        </div>`
      if((index+1)%14==0){
        let $dota2_line=$("<div class='images-line'></div>");
        $dota2_wrapper.append($dota2_line);
        $dota2_line.append(wrapperHero);
        wrapperHero="";
      }
      tableHero += `<tr><td>${hero.id}</td><td><a href="javascript:void(0)">${hero.localized_name_cn}</a></td>
<td>${hero.localized_name}</td><td><span className="badge badge-warning">${hero.primary_attr}_zhangqi</span></td>
<td>${hero.base_str}</td><td>${hero.base_agi}</td><td>${hero.base_int}</td><td>${parseFloat(hero.str_gain + hero.agi_gain + hero.int_gain).toFixed(1)}</td><td>${hero.base_attack}</td><td>
            <a href="javascript:void(0)" className="text-danger" data-toggle="tooltip" data-original-title="Delete"><i
                className="ti-trash" aria-hidden="true"></i></a>
        </td></tr>`
    })
    console.log(result_heroes_str)
    timeout(1).then(function () {
      stop_anime();
      $(".dota2_war").fadeOut(2000);
      $("#dota2_end").fadeOut(2000);
      return timeout(time_each_card_delay);
    }).then(function () {
      anime_ps("PS：每点力量提供20点生命和0.09秒生命恢复速度", delay_endTime, ps_main_leaveTime);
      rate("base_str","初始力量最高");
      $(".wrapper-images").fadeIn(2000).delay(5000).fadeOut(3000);
      anime({
        targets: '.dota2_b_png',
        scale: [
          {value: .1, easing: 'easeOutSine', duration: 500},
          {value: 1, easing: 'easeInOutQuad', duration: 1200}
        ],
        translateX: anime.stagger(10, {grid: [14, 5], from: 'center', axis: 'x'}),
        translateY: anime.stagger(10, {grid: [14, 5], from: 'center', axis: 'y'}),
        //rotateZ: anime.stagger([0, 90], {grid: [14, 5], from: 'center', axis: 'x'}),
        delay: anime.stagger(200, {grid: [14, 5], from: 'center'}),
        easing: 'easeInOutQuad'
      });
      return timeout(time_each_card);
    }).then(function () {
      stop_anime();
      return timeout(time_each_card_delay);
    }).then(function () {
      anime_ps("PS：每点敏捷提供1攻击速度和0.16点护甲", delay_endTime, ps_main_leaveTime);
      rate("base_agi","初始敏捷最高");
      return timeout(time_each_card);
    }).then(function () {
      anime_ps("PS：每点智力提供12点魔法和0.05秒魔法恢复速度", delay_endTime, ps_main_leaveTime);
      stop_anime();
      return timeout(time_each_card_delay);
    }).then(function () {
      rate("base_int","初始智力最高");
      return timeout(time_each_card);
    }).then(function () {
      stop_anime();
      return timeout(time_each_card_delay);
    }).then(function () {
      rate("base_str","初始力量最低",true);
      return timeout(time_each_card);
    }).then(function () {
      stop_anime();
      return timeout(time_each_card_delay);
    }).then(function () {
      rate("base_agi","初始敏捷最低",true)
      return timeout(time_each_card);
    }).then(function () {
      stop_anime();
      return timeout(time_each_card_delay);
    }).then(function () {
      anime_ps("PS：敌法弱不弱智我不知道，但是一手敌法肯定是弱智", delay_gold_endTime, ps_leaveTime);
      rate("base_int","初始智力最低",true);
      return timeout(time_each_card);
    }).then(function () {
      stop_anime();
      return timeout(time_each_card_delay);
    }).then(function () {
      rate("str_gain","力量成长最高")
      return timeout(time_each_card);
    }).then(function () {
      stop_anime();
      return timeout(time_each_card_delay);
    }).then(function () {
      rate("agi_gain","敏捷成长最高");
      return timeout(time_each_card);
    }).then(function () {
      stop_anime();
      return timeout(time_each_card_delay);
    }).then(function () {
      rate("int_gain","智力成长最高");
      return timeout(time_each_card);
    }).then(function () {
      stop_anime();
      return timeout(time_each_card_delay);
    }).then(function () {
      anime_ps("PS：你怎么肥事小老弟", delay_gold_endTime, ps_leaveTime);
      rate("str_gain","力量成长最低",true);
      return timeout(time_each_card);
    }).then(function () {
      stop_anime();
      return timeout(time_each_card_delay);
    }).then(function () {
      rate("agi_gain","敏捷成长最低",true);
      return timeout(time_each_card);
    }).then(function () {
      stop_anime();
      return timeout(time_each_card_delay);
    }).then(function () {
      anime_ps("PS：好像所有游戏里设定的巨魔都是弱智", delay_gold_endTime, ps_leaveTime);
      rate("int_gain","智力成长最低",true);
      return timeout(time_each_card);
    }).then(function () {
      stop_anime();
      return timeout(time_each_card_delay);
    }).then(function () {
      anime_ps("PS：三围：力量，敏捷，智力", delay_endTime, ps_main_leaveTime);
      rate("base_count_asi_gain","三围成长最优秀")
      return timeout(time_each_card);
    }).then(function () {
      stop_anime();
      return timeout(time_each_card_delay);
    }).then(function () {
      rate("base_count_asi_gain","三围成长最差劲",true);
      return timeout(time_each_card);
    }).then(function () {
      stop_anime();
      return timeout(time_each_card_delay);
    }).then(function () {
      anime_ps("森海飞霞：是我！金色传说！", delay_gold_endTime, ps_leaveTime);
      rate("attack_rate","初始攻速最慢");
      return timeout(time_each_card);
    }).then(function () {
      stop_anime();
      return timeout(time_each_card_delay);
    }).then(function () {
      anime_ps("PS：主宰！永远滴神！", delay_gold_endTime, ps_leaveTime);
      rate("attack_rate","初始攻速最快",true);
      return timeout(time_each_card);
    }).then(function () {
      stop_anime();
      return timeout(time_each_card_delay);
    }).then(function () {
      rate("move_speed","初始移速最快");
      return timeout(time_each_card);
    }).then(function () {
      stop_anime();
      return timeout(time_each_card_delay);
    }).then(function () {
      anime_ps("PS：阻止我们发挥的，不是天真，而是无'鞋'啊！", delay_endTime, ps_main_leaveTime);
      rate("move_speed","初始移速最慢",true);
      return timeout(time_each_card);
    }).then(function () {
      stop_anime();
      return timeout(time_each_card_delay);
    }).then(function () {
      anime_ps("PS：每个英雄除了基础攻击力上下限外，其主属性会额外提供1点攻击力，英雄的攻击力取最大加最小的平均数加主属性", delay_endTime, ps_main_leaveTime);
      rate("base_attack","初始攻击力最高");
      return timeout(time_each_card);
    }).then(function () {
      stop_anime();
      return timeout(time_each_card_delay);
    }).then(function () {
      anime_ps("PS：都闪开，我去下路，保敌法！", delay_gold_endTime, ps_leaveTime);
      rate("base_attack","初始攻击力最低",true);
      return timeout(time_each_card);
    }).then(function () {
      stop_anime();
      return timeout(time_each_card_delay);
    }).then(function () {
      anime_ps("PS：护甲再高，也挡不住聪明人来提款", delay_gold_endTime, ps_leaveTime);
      rate("base_armor","初始护甲最高");
      return timeout(time_each_card);
    }).then(function () {
      stop_anime();
      return timeout(time_each_card_delay);
    }).then(function () {
      anime_ps("PS：没错，这货就是负甲", delay_gold_endTime, ps_leaveTime);
      rate("base_armor","初始护甲最低",true);
      return timeout(time_each_card);
    }).then(function () {
      stop_anime();
      return timeout(time_each_card_delay);
    }).then(function () {
      anime_ps("PS：节肢动物狂喜！等等，怎么有个人？？！！", delay_gold_endTime, ps_leaveTime);
      rate("legs","腿最多（什么鬼？）");
      return timeout(time_each_card);
    }).then(function () {
      stop_anime();
      anime_end();
      //return timeout(time_each_card_delay);
    });
  })

  function stop_anime() {
    anime.remove('.dota2_div');
    anime.remove('.dota2_card');
  }

  /**
   * 属性排序
   * @param attr
   * @param title
   * @param reverse
   */
  function rate(attr,title,reverse=false) {
    let base_delay = 1000;
    let base_delay_endTime = 10000;
    $("#dota2_message").html("");
    $("#dota2_title").html("");
    Function(`$("#dota2_title").html("${title}");
            result_heroes.sort(function (a, b) {
                return b.${attr} - a.${attr};
            });
            if(${!reverse}){
                for (let i = hero_num - 1; i > -1; i--) {
                    $("#dota2_message").append(get_dota2_dom(i, 0, result_heroes[i].${attr}));
                }
            }else{
                let j = 4;
                for (let i = result_heroes.length - 5; i < result_heroes.length; i++) {
                    $("#dota2_message").append(get_dota2_dom(j, i, result_heroes[i].${attr}));
                    j--;
                }
            }
        `)();
    let anime_title = anime({
      targets: '#dota2_title',
      translateX: moveX,
      delay: base_delay,
      endDelay: base_delay_endTime,
      direction: 'alternate',
      loop: true,
      easing: 'linear'
    });
    let anime_hero_5 = anime({
      targets: '#dota2_card5',
      translateX: moveX,
      delay: base_delay += 3000,
      endDelay: base_delay_endTime -= 1500,
      direction: 'alternate',
      loop: true,
      easing: 'linear'
    });
    let anime_hero_4 = anime({
      targets: '#dota2_card4',
      translateX: moveX,
      delay: base_delay += 3000,
      endDelay: base_delay_endTime -= 1500,
      direction: 'alternate',
      loop: true,
      easing: 'linear'
    });
    let anime_hero_3 = anime({
      targets: '#dota2_card3',
      translateX: moveX,
      delay: base_delay += 3000,
      endDelay: base_delay_endTime -= 1500,
      direction: 'alternate',
      loop: true,
      easing: 'linear'
    });
    let anime_hero_2 = anime({
      targets: '#dota2_card2',
      translateX: moveX,
      delay: base_delay += 3000,
      endDelay: base_delay_endTime -= 1500,
      direction: 'alternate',
      loop: true,
      easing: 'linear'
    });
    let anime_hero_1 = anime({
      targets: '#dota2_card1',
      translateX: moveX,
      delay: base_delay += 3000,
      endDelay: base_delay_endTime -= 1500,
      direction: 'alternate',
      loop: true,
      easing: 'linear'
    });
    animation.push(anime_title)
    animation.push(anime_hero_1)
    animation.push(anime_hero_2)
    animation.push(anime_hero_3)
    animation.push(anime_hero_4)
    animation.push(anime_hero_5)
  }

  function anime_ps(msg, delay_time, delay_endTime) {
    $("#dota2_ps").show();
    $("#dota2_ps").html("");
    let anime_ps = anime({
      targets: '#dota2_ps',
      translateX: 2100,
      delay: delay_time,
      endDelay: delay_endTime,
      direction: 'alternate'
    });
    animation.push(anime_ps)
    setTimeout(function () {
      text({
        str: msg,
        effect: "left",
        speed: 60,
        dom: "#dota2_ps"
      });
    }, delay_time)
  }

  function anime_end() {
    $("#dota2_message").html("");
    $("#dota2_title").html("");
    $("#dota2_end").show();
    anime({
      targets: '#dota2_end',
      translateX: moveX
    });
    dota2_war();
    //$(".wrapper-images").fadeIn(2000);
    text({
      str: "力量，敏捷，智力，速度，护甲，都不过是史诗的要素；围绕着遗迹展开的故事才是史诗本身。",
      effect: "left",
      speed: 200,
      dom: "#dota2_end"
    });
  }

  function dota2_war() {
    $(".dota2_war").fadeIn(1000);
    let top=-0;
    let left=-0;
    let duration=2000;
    anime({
      targets: '#hero_tt_1',
      translateY: -290+left,
      duration: 3300+duration,
      easing: 'easeOutExpo',
      delay: 2000
    });
    anime({
      targets: '#hero_tt_2',
      translateX: function(el) {
        return -60+top;
      },
      translateY: function(el, i) {
        return -230+left;
      },
      duration: 3800+duration,
      delay: 2100,
      easing: 'easeOutExpo',
      direction: 'alternate',
      loop: false
    });
    anime({
      targets: '#hero_yy_1',
      translateY: 60+left,
      translateX: -480+top,
      easing: 'easeOutExpo',
      duration: 3000+duration,
      delay: 2000
    });
    anime({
      targets: '#hero_yy_2',
      translateY: 0+left,
      translateX: -420+top,
      easing: 'easeOutExpo',
      duration: 3200+duration,
      delay: 2100
    });
    anime({
      targets: '#hero_tt_3',
      translateX: function(el) {
        return 160+top;
      },
      translateY: function(el, i) {
        return -160+left;
      },
      duration: 3500+duration,
      delay: 2000,
      easing: 'easeOutExpo',
      loop: false
    });
    anime({
      targets: '#hero_yy_3',
      translateX: function(el) {
        return -200+top;
      },
      translateY: function(el, i) {
        return 140+left;
      },
      duration: 3500+duration,
      delay: 2000,
      easing: 'easeOutExpo',
      loop: false
    });
    anime({
      targets: '#hero_tt_4',
      translateX: 440+top,
      translateY: 0+left,
      duration: 3200+duration,
      easing: 'easeOutExpo',
      delay: 2100
    });
    anime({
      targets: '#hero_tt_5',
      translateX: 440+top,
      duration: 3000+duration,
      easing: 'easeOutExpo',
      delay: 2000
    });
    anime({
      targets: '#hero_yy_4',
      translateY: 320+left,
      duration: 3200+duration,
      easing: 'easeOutExpo',
      delay: 2000
    });
    anime({
      targets: '#hero_yy_5',
      translateX: function(el) {
        return 0+top;
      },
      translateY: function(el, i) {
        return 320+left;
      },
      duration: 3500+duration,
      easing: 'easeOutExpo',
      delay: 2000,
      direction: 'alternate',
      loop: false
    });
  }

  function get_dota2_dom(i, index, base) {
    let text;
    if (index === 0) {
      text = `<div id='dota2_card${i + 1}' class='dota2_card dota2_rate${i + 1}'>
                    <img style="background:url('https://hoppinzq.com/dota2/gif/${result_heroes[i].name}.gif') center;background-size:140px 140px;background-repeat:no-repeat;" />
                    <dd>${result_heroes[i].localized_name_cn}</dd>
                    <p class='hero_rate'>${base}</p>
                    <a href='#' onclick='open_hero_message(${i})'></a>
                </div>`;
    } else {
      text = `<div id='dota2_card${i + 1}' class='dota2_card dota2_rate${i + 1}'>
                    <img style="background:url('https://hoppinzq.com/dota2/gif/${result_heroes[index].name}.gif') center;background-size:140px 140px;background-repeat:no-repeat;" />
                    <dd>${result_heroes[index].localized_name_cn}</dd>
                    <p class='hero_rate'>${base}</p>
                    <a href='#' onclick='open_hero_message(${index})'></a>
                </div>`;
    }
    return text;
  }

  function open_hero_message(index) {
    myAlert(JSON.stringify(result_heroes[index]))
  }

  function myAlert(e) {
    $("body").append(`<div id='alert_msg'><span>${e}</span></div>`);
    clearMsg();
  }

  function clearMsg() {
    let t = setTimeout(function () {
      $("#alert_msg").remove();
    }, 2000)
  };

  function text(parameter) {
    let typewriter = {
      str: parameter.str || "dota2",
      effect: parameter.effect || "upBig",
      speed: parameter.speed || 200,
      dom: parameter.dom || "body",
    }
    arr = [];
    for (let i = 0; i < typewriter.str.length; i++) {
      arr[i] = typewriter.str[i];
    }
    let num = 0;
    obj = setInterval(function () {
      let dom = typewriter.dom;
      let $dom = $(dom);
      if (typewriter.effect === "normal") {
        $dom.append('<span style="display: inline-block;" class="tip">' + arr[num] + '</span>');
      } else if (typewriter.effect === "rightBig") {
        $dom.append('<span style="display: inline-block;" class="tip animated fadeInRightBig">' + arr[num] + '</span>');
      } else if (typewriter.effect === "right") {
        $dom.append('<span style="display: inline-block;" class="tip animated fadeInRight">' + arr[num] + '</span>');
      } else if (typewriter.effect === "leftBig") {
        $dom.append('<span style="display: inline-block;" class="tip animated fadeInLeftBig">' + arr[num] + '</span>');
      } else if (typewriter.effect === "left") {
        $dom.append('<span style="display: inline-block;" class="tip animated fadeInLeft">' + arr[num] + '</span>');
      } else if (typewriter.effect === "downBig") {
        $dom.append('<span style="display: inline-block;" class="tip animated fadeInDownBig">' + arr[num] + '</span>');
      } else if (typewriter.effect === "down") {
        $dom.append('<span style="display: inline-block;" class="tip animated fadeInDown">' + arr[num] + '</span>');
      } else if (typewriter.effect === "upBig") {
        $dom.append('<span style="display: inline-block;" class="tip animated fadeInUpBig">' + arr[num] + '</span>');
      } else if (typewriter.effect === "up") {
        $dom.append('<span style="display: inline-block;" class="tip animated fadeInUp">' + arr[num] + '</span>');
      }
      num++
      if (num === arr.length) {
        clearInterval(obj);
      }
    }, typewriter.speed);

  }
</script>
</html>
